<template>
  <div id="happyCake">
    <div class="login">
      <div class="changeTip"><span>今日您还有 {{residue}}次 抽奖机会</span></div>
      <img src="../../../assets/images/happyCake.png" alt="">
      <img class="img1" :class="{animation1:animation}" src="../../../assets/images/dice1.png" alt="">
      <img class="img2 " :class="{animation2:animation}" src="../../../assets/images/dice2.png" alt="">
      <img class="img3 " :class="{animation3:animation}" src="../../../assets/images/dice3.png" alt="">
      <img class="img4 " :class="{animation4:animation}" src="../../../assets/images/dice4.png" alt="">
      <img class="img5 " :class="{animation5:animation}" src="../../../assets/images/dice5.png" alt="">
      <img class="img6 " :class="{animation6:animation}" src="../../../assets/images/dice6.png" alt="">
      <img class="img7 " :class="{animation7:animation}" src="../../../assets/images/dice7.png" alt="">
    </div>
    <div class="btn"><input type="button" value="开始" @click="happyCakeStart"></div>
    <van-popup v-model="popupShow">
      <div class="popup">
        <div class="popup1">{{successData.desc}}</div>
        <div class="popup2">{{successData.score}}</div>
        <div class="popupClose" @click="close"><img src="../../../assets/images/popupClose.png" alt=""></div>
        <div class="popupMain">
          <img :src="imgForm[item]" alt="" v-for="(item,index) in successData.number" :key="index">

        </div>
        <p class="popupTip">{{successData.awards}}</p>
        <div class="popupBtn" @click="popupBtn"><img src="../../../assets/images/happypopupBtn.png" alt=""></div>

      </div>
    </van-popup>
    <div class="tip">
      <p>规则说明</p>
      <p v-html="rule"></p>
    </div>
    <div class="table">
      <table class="tab1" cellpadding="0" cellspacing="0">
        <tr>
          <th colspan="2">奖项</th>
        </tr>
        <tr>
          <td rowspan="13" width="34%">状元</td>
          <td>状元插金花</td>
        </tr>
        <tr>
          <td width="66%">六红</td>
        </tr>
        <tr>
          <td width="66%">遍地锦</td>
        </tr>
        <tr>
          <td rowspan="4" width="66%">六黑</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>

        <tr>
          <td width="66%">五红</td>
        </tr>
        <tr>
          <td rowspan="5" width="66%">五子登科</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
          <td width="34%"></td>
          <td width="66%">四红</td>
        </tr>
        <tr>
          <td colspan="2">榜眼（对堂）</td>
        </tr>
        <tr>
          <td colspan="2">探花（三红）</td>
        </tr>
        <tr>
          <td colspan="2" rowspan="5">进士（四进）</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
          <td colspan="2">举人（二举）</td>
        </tr>
        <tr>
          <td colspan="2">秀才（一秀）</td>
        </tr>
      </table>
      <table class="tab2" cellpadding="0" cellspacing="0">
        <tr>
          <th>特征</th>
        </tr>
        <tr v-for="(items,index) in tab2" :key="index">
          <td>
            <img :src="imgForm[item]" alt="" v-for="(item,index) in items" :key="index">
          </td>
        </tr>
      </table>
      <table class="tab3" cellpadding="0" cellspacing="0">
        <tr>
          <th>奖励工分</th>
        </tr>
        <tr v-for="(item,index) in tab3" :key="index">
          <td :rowspan="item.zqspan" v-if="!item.zqdis">{{item.zq}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/8 0008 16:04.
   */
  import utils from '../../../lib/StringExtend'

  export default {
    mounted() {
      if (!utils.isNone(utils.getCookie('open_id_' + this.wechatId)) && !utils.isNone(this.wechat_id)) {
        this.loadData();
      } else if (!utils.isNone(utils.getCookie('open_id_' + this.wechatId))) {
        setTimeout(() => {
          this.loadData();
        }, 300)
      }
    },
    components: {},
    props: {},
    data() {
      return {
        imgForm: [
          require('../../../assets/images/zero.png'), require('../../../assets/images/one.png'), require('../../../assets/images/two.png'),
          require('../../../assets/images/three.png'), require('../../../assets/images/four.png'), require('../../../assets/images/five.png'),
          require('../../../assets/images/six.png')],
        tab2: [
          [4, 4, 4, 4, 1, 1], [4, 4, 4, 4, 4, 4], [1, 1, 1, 1, 1, 1], [6, 6, 6, 6, 6, 6], [5, 5, 5, 5, 5, 5], [3, 3, 3, 3, 3, 3], [2, 2, 2, 2, 2, 2], [4, 4, 4, 4, 4, 0],
          [6, 6, 6, 6, 6, 0], [5, 5, 5, 5, 5, 0], [3, 3, 3, 3, 3, 0], [2, 2, 2, 2, 2, 0], [1, 1, 1, 1, 1, 0], [4, 4, 4, 4, 0, 0], [1, 2, 3, 4, 5, 6], [4, 4, 4, 0, 0, 0],
          [6, 6, 6, 6, 0, 0], [5, 5, 5, 5, 0, 0], [3, 3, 3, 3, 0, 0], [2, 2, 2, 2, 0, 0], [1, 1, 1, 1, 0, 0], [4, 4, 0, 0, 0, 0], [4, 0, 0, 0, 0, 0]
        ],
        tab3: [{zq: 0}, {zq: 0}, {zq: 0}, {zq: 0}, {zq: 90}, {zq: 90},
          {zq: 70}, {zq: 70}, {zq: 70}, {zq: 70}, {zq: 70}, {zq: 60}, {zq: 50}, {zq: 40}, {zq: 30},
          {zq: 30}, {zq: 30}, {zq: 30},
          {zq: 30}, {zq: 20}, {zq: 10}, {zq: 0}, {zq: 0}],
        animation: false,
        popupShow: false,
        successData: {
          number: [6, 1, 5, 4, 5, 3],
          desc: "恭喜您",
          score: "抽中10工分",
          awards: "一秀"
        },
        rule: '',
        residue: '0',//次数

        wechatId: utils.getCookie('wechat_id'),
        wechat_id: this.$route.query.wechat_id,//公众号
      }
    },
    computed: {},
    methods: {

      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        this.$axios.moonBattleAwardInfo(params).then(res => {
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.residue = res.data.residue;
          res.data.data_arr.forEach((item, index) => {
            this.tab3[index].zq = item;
          });
          var reg = new RegExp(" ", "g");
          this.rule = res.data.rule.replace(reg, '<br>');
        })
      },
      //开始博饼
      happyCakeStart() {
        if (this.animation) {
          return
        }
        if (this.residue == '0') {
          this.$toast('今日次数已用完，请明日再来哦～');
          return
        }
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        this.$axios.moonBattleClickBegin(params).then(res => {
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.residue = res.data.residue;
          this.successData = res.data;
          this.start();
        });
      },
      start() {
        this.animation = true;
        setTimeout(() => {
          this.animation = false;
          this.popupShow = true;
        }, 5000)
      },
      uploadData: function (list) {
        var k = 0;
        let field = "zq";
        while (k < list.length) {
          list[k][field + 'span'] = 1;
          list[k][field + 'dis'] = false;
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][field] == list[i][field] && list[k][field] != '' && list[k]['yd'] == list[i]['yd'] && list[k]['yd'] != '') {
              list[k][field + 'span']++;
              list[k][field + 'dis'] = false;
              list[i][field + 'span'] = 1;
              list[i][field + 'dis'] = true;
            } else {
              break;
            }
          }
          k = i;
        }
        return list;
      },
      popupBtn() {
        this.popupShow = false;
      },
      close() {
        this.popupShow = false;
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  #happyCake {
    height: 100%;
    overflow: auto;
    background: url("../../../assets/images/happyCakeBg.png") repeat;
    background-size: 100% 100%;
    text-align: center;

    .login {
      width: 5.4rem;
      height: 3.4rem;
      margin: 1.5rem auto 0.28rem auto;
      /*margin: 0.7rem auto 0.28rem auto;*/
      position: relative;

      .changeTip {
        width: 100%;
        padding-top: 2.2rem;
        text-align: center;
        box-sizing: border-box;
        position: absolute;
        top: -3.2rem;

        span {
          color: #ffffff;
          border: solid 1px #ffffff;
          font-size: 0.25rem;
          border-radius: 0.17rem;
          height: 0.34rem;
          line-height: 0.34rem;
          padding: 0.02rem 0.1rem;
        }
      }

      img {
        width: 5.4rem;
        height: 2.8rem;
        position: absolute;
        top: 0.6rem;
        left: -0.3rem;
      }

      .img1 {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0;
        left: 2.6rem;
      }

      .img2 {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.44rem;
        left: 4rem;
      }

      .img3 {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.7rem;
        left: 2.2rem;
      }

      .img4 {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.7rem;
        left: 3rem;
      }

      .img5 {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.14rem;
        left: 3.4rem;
      }

      .img6 {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 1rem;
        left: 3.6rem;
      }

      .img7 {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 1rem;
        left: 2.6rem;
      }
    }

    .btn {

      input[type='button'] {
        background: #ffd32b;
        border-radius: 0.1rem;
        width: 1.8rem;
        height: 0.66rem;
        border: 0;
        margin-bottom: 0.5rem;
        font-size: 0.3rem;
        color: #6b552c;
      }
    }

    .van-popup {
      border-radius: 0.1rem;
    }

    .popup {
      width: 5.37rem;
      height: 4.61rem;
      position: relative;
      overflow: hidden;
      background: url("../../../assets/images/happypopupBg.png") no-repeat;
      background-size: 100% 100%;

      .popupMain {
        position: absolute;
        top: 1.66rem;
        left: 50%;
        width: 2.8rem;
        margin-left: -1.4rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        img {
          width: 0.4rem;
          height: 0.4rem;
        }

      }

      .popupClose {
        position: absolute;
        top: 0;
        right: 0;
        width: 0.55rem;
        height: 0.55rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .popup1 {
        position: absolute;
        top: 0.64rem;
        text-align: center;
        width: 100%;
        color: #fcb49b;
        font-size: 0.3rem;
      }

      .popup2 {
        position: absolute;
        top: 1.06rem;
        text-align: center;
        width: 100%;
        color: #fde7a9;
        font-size: 0.3rem;
      }

      .popupTip {
        position: absolute;
        top: 2.2rem;
        text-align: center;
        width: 100%;
        color: #fcb49b;
        font-size: 0.3rem;
      }

      .popupBtn {
        width: 3.7rem;
        position: absolute;
        bottom: 0.2rem;
        left: 50%;
        margin-left: -1.85rem;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .tip {
      font-family: AdobeHeitiStd-Regular;
      font-size: 0.24rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 2px;
      color: #ffd32b;
      text-align: left;
      padding: 0 0.4rem;
      box-sizing: border-box;

      p {
        text-align: left;
        line-height: 0.4rem;
      }

      p:first-child {
        font-size: 0.28rem;
        line-height: 0.6rem;
      }
    }

    .table {
      width: 6.72rem;
      height: 14rem;
      margin: 0.36rem auto;
      display: flex;
      flex-direction: row;
      color: #2c2c28;
      font-weight: 700;
      box-sizing: border-box;
      font-size: 0.24rem;

      .tab1, .tab2 {
        width: 2.56rem;
        height: 100%;
        background: #fff295;
        color: #2c2c28;

        td {
          border-bottom: solid 1px #9e7816;
          border-right: solid 1px #9e7816;

          img {
            width: 0.2rem;
            height: 0.2rem;
            margin-right: 0.05rem;
          }
        }
      }

      .tab3 {
        width: 1.56rem;
        height: 100%;
        color: #2c2c28;
        background: #fff295;

        td {
          border-bottom: solid 1px #9e7816;
          border-right: solid 1px #9e7816;
        }
      }

      th {
        border-top: solid 1px #9e7816;
        border-bottom: solid 1px #9e7816;
        border-right: solid 1px #9e7816;
        color: #e93737;
        font-weight: 700;
      }

      tr, th {
        height: 0.3rem !important;
        line-height: 0.28rem;
      }
    }


    @-webkit-keyframes bal3 {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
      }
    }
    @keyframes bal3 {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
      }
    }
    @-webkit-keyframes bal4 {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
      }
    }
    @keyframes bal4 {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
      }
    }

    .animation {
      -webkit-animation: bal3 480ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 480ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }

    .animation1 {
      -webkit-animation: bal3 480ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 480ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }

    .animation2 {
      -webkit-animation: bal3 470ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 470ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }

    .animation3 {
      -webkit-animation: bal3 460ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 460ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }

    .animation4 {
      -webkit-animation: bal4 460ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal4 460ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }

    .animation5 {
      -webkit-animation: bal3 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }

    .animation6 {
      -webkit-animation: bal3 530ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal3 530ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }

    .animation7 {
      -webkit-animation: bal4 570ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
      animation: bal4 570ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
    }
  }

</style>
